<template>
  <div class="text-tooltip">
    <el-tooltip class="item" effect="dark" :disabled="isShowTooltip"
                :content="content" placement="bottom-start">
      <p ref="over" class="over-flow" :class="className"
         @mouseover="onMouseOver(refName)">
        <span ref="con">{{ content || "-" }}</span>
      </p>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'TextTooltip',
  props: {
    width: {
      type: Number,
      default: 0
    },
    // 显示的文字内容
    content: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 外层框的样式，在传入的这个类名中设置文字显示的宽度
    className: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
    refName: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      isShowTooltip: true
    }
  },
  mounted() {
    if (this.width) {
      this.$refs.over.style.maxWidth = `${this.width}px`
    }
  },
  methods: {
    onMouseOver(str) {
      const parentWidth = this.width || this.$el.offsetWidth
      // const parentWidth = 100
      if (!this.$refs.con) {
        return
      }
      const contentWidth = this.$refs.con.offsetWidth
      // 判断是否开启tooltip功能
      if (contentWidth > parentWidth) {
        this.isShowTooltip = false
      } else {
        this.isShowTooltip = true
      }
    }
  }
}
</script>

  <style lang="scss" scoped>
  .text-tooltip {
    flex: 1;
    // display: flex;
    display: inline-flex;
    overflow: hidden;
    width:100%;
  }
  .over-flow {
    //   width: 200px;
    position: relative;
    top: 0px;
    margin: 0 !important;
    // line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    span {
      cursor: pointer;
    }
  }
  </style>
